<template>
  <div class="article-list-wrap">

    <van-pull-refresh v-model="pullLoading" @refresh="onRefresh">
      <!--

        loading是用来标记当前是否处于加载状态
            如果loading为false代表不在加载状态，可以准备下次新的加载
            如果loading为true代表还在加载状态，不能进行新的加载

        finished用来标记是否加载完成，如果为true，代表加载完了，
            就不会再调用onLoad来加载数据了

        onLoad：用来加载数据的方法
    -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in list" :key="item.art_id">
          <div @click="$router.push({ name: 'detail',query:{id: item.art_id } })">{{ item.title }}</div>
          <van-grid :gutter="10" :border="false" :column-num="item.cover.type">
            <van-grid-item
              v-for="(pic, index) in item.cover.images"
              :key="index"
            >
              <van-image :src="pic" />
            </van-grid-item>
          </van-grid>

          <div style="color: gray">
            <span>{{ item.aut_name }}</span>
            <span style="margin: 0 15px">{{ item.comm_count }}评论</span>
            <span>{{ item.pubdate | relvTime }}</span>

            <van-icon style="float: right" name="cross" />
          </div>
        </van-cell>
      </van-list>

    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  name: "artList",
  props: ["channel_id"],
  data() {
    return {
      // 标记下拉刷新的状态
      pullLoading: false,
      list: [],
      loading: false,
      finished: false,
      // 时间戳
      timestamp: Date.now(),
    };
  },
  methods: {
    /*
        什么时候会调用onLoad加载数据？
        当页面打开时，它发现数据没有铺满一屏，就会调用来加载数据
        以及，当你上拉会来调用加载新数据

        前提是：finished不能为true，为true代表加载完了
        
        结论
        ：onLoad要满足三个条件才会调用
            1. loading 为 false
            2. finished 为 false
            3. 要没铺满一屏或者上拉
    */
    async onLoad() {
      // 真实发请求
      let res = await this.$axios({
        url: "/v1_0/articles",
        params: {
          channel_id: this.channel_id,
          timestamp: this.timestamp,
        },
      });

      // 把接下来的上一段新闻的时间戳保存到timestamp里面
      this.timestamp = res.data.data.pre_timestamp;

      // 注意：这里要添加，而不是赋值，赋值就会覆盖
      this.list.push(...res.data.data.results);

      // 如果本次请求完了要把loading这个加载状态变成false方便下次加载
      this.loading = false;

      // 如果加载完数据需要把finished改成true
      if (res.data.data.pre_timestamp == null) {
        this.finished = true;
      }
    },

    // 当这个被调用，意味着下拉了
    // 所以我们要发请求获取数据
    async onRefresh () {

      // 真实发请求
      let res = await this.$axios({
        url: "/v1_0/articles",
        params: {
          channel_id: this.channel_id,
          // 因为每次下拉都是为了加载最新新闻
          timestamp: Date.now(),
        },
      });

      // // 把接下来的上一段新闻的时间戳保存到timestamp里面
      this.timestamp = res.data.data.pre_timestamp;

      // 注意：这里要添加，而不是赋值，赋值就会覆盖
      this.list = res.data.data.results

      // 加载完数据结束加载状态
      this.pullLoading = false
    }
  },
  // 写过滤器的地方
  // 局部过滤器，顾名思义它只能在这一个文件里用
  // filters: {
  //   relvTime (val) {

  //     return moment(val).fromNow()
  //   }
  // }
};
</script>

<style>
.article-list-wrap {
  position: fixed;
  width: 100vw;
  left: 0;
  top: 90px;
  bottom: 50px;
  overflow: auto;
}
</style>